<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆环菜单</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="circle-menu" id="circle-menu">
        <div class="circle-menu-container">
            <div class="circle-menu-item">1</div>
            <div class="circle-menu-item">2</div>
            <div class="circle-menu-item">3</div>
            <div class="circle-menu-item">4</div>
            <div class="circle-menu-item">5</div>
        </div>
        <div class="circle-menu-switch">菜单</div>
    </div>
    <script>
        class CircleMenu {
            constructor(el, options) {
                this.options = {
                    radius: 150,
                    dir: 'rb',
                    offset: 10
                }
                this.options = Object.assign({}, this.options, options);
                this.wrap = document.querySelector(el);
                this.btn = this.wrap.querySelector(".circle-menu-switch");
                this.menuItem = this.wrap.querySelectorAll(".circle-menu-item");
                this.menuItemWidth = this.menuItem[0].offsetWidth;
                this.length = this.menuItem.length;
                this.angle = 90 / (this.length - 1);
                this.bBtn = 0;
                this.handleMenu();
            }
            handleMenu() {
                var self = this;
                this.btn.addEventListener("click", function () {

                    if (self.bBtn % 2 === 0) {
                        this.style.WebkitTransform = 'rotate(-360deg)'
                        self.open()
                    } else {
                        this.style.WebkitTransform = 'rotate(0deg)'
                        self.close()
                    }

                    self.bBtn = self.bBtn + 1;
                })
            }
            open() {
                for (let i = 0; i < this.length; i++) {
                    var ele = this.menuItem[i];
                    // 通过三角函数，计算出 left,top的值
                    // sin(角度) = > Math.sin(角度 * Math.PI / 180)
                    // cos(角度) = > Math.cos(角度 * Math.PI / 180)
                    ele.style.top = Math.ceil(-1 * Math.sin(this.angle * i * Math.PI / 180) * this.options.radius) - this.menuItemWidth + 'px';
                    ele.style.left = Math.ceil(-1 * Math.cos(this.angle * i * Math.PI / 180) * this.options.radius) - this.menuItemWidth + 'px';

                    // 设置延迟过度效果
                    ele.style.WebkitTransform = 'rotate(-720deg)'
                    ele.style.WebkitTransitionDelay = 0.1 * i + 's';
                }
            }
            close() {
                for (let i = this.length - 1; i > -1; i--) {
                    var ele = this.menuItem[i];
                    ele.style.top = '-50px';
                    ele.style.left = '-50px';
                    // 设置延迟过度效果
                    ele.style.WebkitTransform = 'rotate(0deg)'
                    ele.style.WebkitTransitionDelay = 0.1 * (5 - i) + 's';
                }
            }
        }

        var cMenu = new CircleMenu("#circle-menu", { radius: 150 })
    </script>
</body>

</html>